<!--
  @文件名：twoView
  @来源：Winford.Wang|2022/10/31 0031，15:54
  @描述：
-->
<template>
  <div class="twoView">
    <div class="hang" v-mycontextmenu="dataVlae">这是一行的数据</div>
    <br> <br>
    <el-icon>
      <MenuImg/>
    </el-icon>
    <div>
      <el-button>按钮</el-button><el-button>按钮</el-button><el-button v-mycontextmenu="dataVlae">按钮</el-button>
    </div>
    <br> <br>
    <div v-mycontextmenu="dataVlae">
      <el-button>按钮</el-button><el-button>按钮</el-button><el-button>按钮</el-button>
    </div>
    <br> <br>
    <div>
      <el-button>按钮</el-button><el-button>按钮</el-button><el-button>按钮</el-button>
    </div>
    <br> <br>
    <div>
      <el-button>按钮</el-button><el-button>按钮</el-button><el-button>按钮</el-button>
    </div>
    <br> <br>
    <div>
      <el-button>按钮</el-button><el-button>按钮</el-button><el-button>按钮</el-button>
    </div>
    <br> <br>
    <div>
      <el-button>按钮</el-button><el-button>按钮</el-button><el-button>按钮</el-button>
    </div>
    <br> <br>
    <div>
      <el-button>按钮</el-button><el-button>按钮</el-button><el-button>按钮</el-button>
    </div>
    <br> <br>
    <div>
      <el-button>按钮</el-button><el-button>按钮</el-button><el-button>按钮</el-button>
    </div>
    <br> <br>
    <div>
      <el-button>按钮2</el-button><el-button>按钮</el-button><el-button>按钮</el-button>
    </div>
    <br> <br>
    <div v-mycontextmenu="dataVlae">
      <el-button>按钮1</el-button><el-button>按钮</el-button><el-button>按钮</el-button>
    </div>
    <br> <br>
    <div>
      <el-button>按钮</el-button><el-button>按钮</el-button><el-button>按钮</el-button>
    </div>
    <br> <br>
    <div>
      <el-button>按钮</el-button><el-button>按钮</el-button><el-button>按钮</el-button>
    </div>
    <br> <br>
    <div>
      <el-button>按钮</el-button><el-button>按钮</el-button><el-button>按钮</el-button>
    </div>
    <br> <br>
    <div>
      <el-button>按钮</el-button><el-button>按钮</el-button><el-button>按钮</el-button>
    </div>
    <br> <br>
    <div v-mycontextmenu="dataVlae">
      <el-button>按钮</el-button><el-button>按钮</el-button><el-button >按钮</el-button>
    </div>
    <br> <br>
  </div>
</template>

<script>
import { ToiletPaper, ChatDotRound, Open } from '@element-plus/icons-vue'
import { shallowRef } from 'vue'

export default {
  name: 'twoView',
  data () {
    return {
      dataVlae: [
        { name: '上一页', id: 1, icon: shallowRef(ToiletPaper) },
        { name: '第一页', id: 2, disable: true, icon: shallowRef(ChatDotRound) },
        { divider: true },
        { name: '最后一页', id: 3, handler: this.turnPrevSlide },
        { name: '显示工具栏', id: 4, icon: shallowRef(Open) },
        {
          name: '画笔工具',
          id: 5,
          children: [
            {
              name: '大促比',
              id: 54
            },
            {
              name: '大西比',
              id: 514
            }
          ]
        }
      ]
    }
  },
  created () {

  },
  mounted () {

  },
  activated () {

  },
  methods: {
    turnPrevSlide (data, el) {
      console.log(11, data, el)
    }
  },
  deactivated () {

  },
  unmounted () {

  },
  components: {}
}
</script>

<style scoped lang='scss'>

.twoView {
  height: 100%;
  overflow-y: auto;
  .hang{
    width: 100%;
    background-color: antiquewhite;
  }
}
::-webkit-scrollbar{
  width:7px;
  height:7px;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb{
  background-color: rgb(223,223,223);
  border-radius: 4px;
  cursor: pointer;
}
::-webkit-scrollbar-thumb:hover{
  background-color: rgb(210, 210, 210);
}

</style>
